<template>
  <div class="temHeader">
    <ul>
      <li v-for="(item,sum) in dataList" :key='sum'>
        <span :class="index == sum ? 'active' : '' " @click ='navgationTo(item)'>{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [
        {
          title: "同城配送",
          name: "/index/drugfirmsmanage/deliverycharge/samecity/list"
        },
        // {
        //   title: "全国配送",
        //   name: "/index/maintain/systemoperationalconfiguration/deliverycharge/listother"
        // }
      ]
    };
  },
  props: ['index'],
  methods:{
    navgationTo(item){
      // function全局方法
      this.functionJS.queryNavgationTo(this,item.name)
    }
  }
};
</script>
<style lang="less" scoped>
.temHeader {
  width: 100%;
  line-height: 40px;
  ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #ddd;
    li {
      span{
        display: block;
        color: black;
        padding: 8px 10px;
        border-bottom: 2px solid transparent;
        transition: all 0.5s;
        cursor:pointer;
      }
      span:hover {
        color: #5362e1;
        border-bottom: 2px solid #5362e1;
      }
      .active {
        color: #5362e1;
        border-bottom: 2px solid #5362e1;
      }
      .router-link-exact-active {
        color: #5362e1;
        border-bottom: 2px solid #5362e1;
      }
    }
  }
}
</style>

